﻿<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery带微博按钮返回顶部效果 - 黄蜂网素材</title>
    <script src="js/jquery.js"></script>
    <script>
        //scrolltotop
        $(function () {
            //首先将#back-to-top隐藏
            $("#totop").hide();
            //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
            $(function () {
                $(window).scroll(function () {
                    if ($(window).scrollTop() > 100) {
                        $("#totop").fadeIn();
                    }
                    else {
                        $("#totop").fadeOut();
                    }
                });
                
                //当点击跳转链接后，回到页面顶部位置
                $("#totop").click(function () {
                    $('body,html').animate({ scrollTop: 0 }, 500);
                    return false;
                });
            });
        }); 
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /*share_start*/
        #share {
            position: fixed;
            /* _position: absolute;
            _top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight)-34+"px"); */
            bottom: 34px;
            left: 95%;
            width: 30px;
            /* zoom: 1; */
        }

        #share a {
            background-image: url(images/share.png);
            background-repeat: no-repeat;
            display: block;
            width: 30px;
            height: 30px;
            margin-bottom: 2px;
            overflow: hidden;
            text-indent: -999px;
           
            transition: all 0.2s ease-in-out;
        }

        #share a {}

        #share .sina {
            background-position: 0 0;
            position: absolute;
            bottom: 32px;
        }

        #share a.sina:hover {
            background-position: -30px 0;
        }

        #share .tencent {
            background-position: 0 -30px;
            position: absolute;
            bottom: 0;
        }

        #share a.tencent:hover {
            background-position: -30px -30px;
        }

        #share a#totop {
            background-position: 0 -120px;
            position: absolute;
            bottom: 64px;
            cursor: pointer;
        }

        #share a#totop:hover {
            background-position: -30px -120px;
        }

        /*share_end*/
    </style>
</head>

<body style="height:2000px;text-align:center;"><br><br>
    <h1>鼠标使劲往下滚动试试看！！！</h1>
    <div id="share">
        <a id="totop" title="">返回顶部</a>
        <a href="#" target="_blank" class="sina">关注黄蜂网素材新浪微博</a>
        <a href="#" target="_blank" class="tencent">关注黄蜂网素材腾讯微博</a>
    </div>
    <br>
    <div style="text-align:center;clear:both">
        <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
    </div>
</body>

</html>